<script setup>
import {PauseCircleOutlined, PlayCircleOutlined} from '@ant-design/icons-vue'
import {message} from 'ant-design-vue'
import {getCurrentInstance} from "vue";
import PlatformChart from "~/contentScripts/views/tao/list/components/like/platformChart.vue";
import PriceChart from "~/contentScripts/views/tao/list/components/like/priceChart.vue";
import {categoryData, isLogin} from '~/logic'
import {batch} from '~/logic/apis/taoCategory'
import Item from '~/utils/ali/Item'
import {jumpTaoCenter} from "~/utils/util";

const emit = defineEmits(['login'])
const item = getCurrentInstance().proxy.$item
const instance = getCurrentInstance()
const dataSource = ref([])
const title = ref('')
const visible = ref(false)
const loading = ref(false)
const pageSize = 60
const page = ref(0)
const keywords = ref('')
// 0 未开始 1 进行中 2 暂停 3 已完成
const loadingStatus = ref(0)
let result = reactive()
const maxAmount = ref(0)
const loadData = () => {
  return new Promise((resolve, reject) => {
    Item.itemSimilar(item.itemId()).then((items) => {
      items.map(item => {
        if (typeof item.showInfo != 'undefined' && typeof item.showInfo.shop != 'undefined') {
          item.isTmall = item.showInfo.shop.indexOf('旗舰店') > -1 || item.showInfo.shop.indexOf('专卖店') > -1 || item.showInfo.shop.indexOf('专营店') > -1
        }
        if (maxAmount.value < parseInt(item.real_wap_price)) {
          maxAmount.value = parseInt(item.real_wap_price)
        }
      })
      batch(items.map(item => item.cat1))
      dataSource.value.push(...items)
      // console.log(dataSource);
      resolve(items)
    }).catch((e) => {
      // console.log('???');
      // console.log(e);
    })
  })
}
// const loadingMore = async () => {
//   loading.value = false
//   loadingStatus.value = 1
//   while (loadingStatus.value === 1 && result.mods.pager.data.totalPage > result.mods.pager.data.currentPage)
//     result = await loadData()
//
//   if (result.mods.pager.data.totalPage <= result.mods.pager.data.currentPage)
//     loadingStatus.value = 3
//   else
//     loadingStatus.value = 2
// }
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({emit}, __option)) {
    dataSource.value = []
    title.value = `相似宝贝-商品ID[${item.itemId()}]`
    // page.value = 0
    visible.value = true
    loading.value = true
    result = await loadData()
    // console.log(result)
    // loadingMore()
  }
}
const columns = [
  {
    title: '商品信息',
    dataIndex: 'title',
    dataType: 'product',
    dataField: {
      item_title: 'title',
      item_pic: 'pict_url',
      item_id: 'nid',
      item_price: 'real_wap_price',
      detail_url: 'click_url',
    },
    key: 'title',
    fixed: 'left',
  },
  {
    title: '价格',
    dataIndex: 'real_wap_price',
    key: 'real_wap_price',
    align: 'center',
    sorter: (a, b) => a.real_wap_price - b.real_wap_price,
    width: 100,
  },
  {
    title: '月销',
    dataIndex: 'month_sale',
    key: 'volume30day',
    align: 'center',
    sorter: (a, b) => parseInt(a.volume30day) - parseInt(b.volume30day),
    width: 100,
  },
  {
    title: '平台',
    dataIndex: 'isTmall',
    dataType: 'platform',
    align: 'center',
    sorter: (a, b) => a.isTmall - b.isTmall,
    width: 100,
  },
  {
    title: '类目',
    dataIndex: 'cat1',
    dataType: 'category',
    key: 'cat1',
    width: 200,
  },
  {
    title: '商家',
    dataIndex: 'showInfo.shop',
    key: 'shop',
    width: 160,
  },
  // {
  //   title: '描述相符',
  //   dataIndex: 'dsrDescribePercent',
  //   key: 'dsrDescribePercent',
  //   width: 100,
  // },
  // {
  //   title: '服务态度',
  //   dataIndex: 'dsrServicePercent',
  //   key: 'dsrServicePercent',
  //   width: 100,
  // },
  // {
  //   title: '物流服务',
  //   dataIndex: 'dsrDeliverPercent',
  //   key: 'dsrDeliverPercent',
  //   width: 100,
  // },
  {
    title: '操作',
    dataType: 'custom',
    slot: 'action',
    align: 'center',
    fixed: 'right',
    width: 100,
  },
]
const activeKey = ref('priceChart')
</script>

<template>
  <div class="bold inner-box btn bold" @click="handle">
    相似宝贝
  </div>
  <a-modal
      v-model:visible="visible" :title="title" :style="{
      top: '60px',
    }" :footer="false" :width="1370"
  >
    <a-tabs style="margin-top: -10px;"  v-model:activeKey="activeKey">
      <a-tab-pane key="priceChart" tab="价格分布">
        <PriceChart :data-source="dataSource"/>
      </a-tab-pane>
      <a-tab-pane key="shopTypeChart" tab="店铺类型">
        <PlatformChart :data-source="dataSource"/>
      </a-tab-pane>
      <!--            <template #leftExtra> -->
      <!--              <a-button class="tabs-extra-demo-button"> -->
      <!--                Left Extra Action -->
      <!--              </a-button> -->
      <!--            </template> -->
      <!--      <template #rightExtra>-->
      <!--        <div style="color: #444;">-->
      <!--          宝贝数量：{{ dataSource.length }}-->
      <!--        </div>-->
      <!--      </template>-->
    </a-tabs>
    <a-divider/>
    <base-table :table-name="`相似宝贝-商品ID[${item.itemId()}]`" :scroll="{
      y: 400,
      x: '100%',
    }" :columns="columns" :data-source="dataSource" size="small"
    >
      <template #action="record">
        <a-button type="link" size="small" target="_blank" :href="record.click_url">
          查看商品
        </a-button>
        <a-button type="link" size="small" target="_blank" @click.stop="jumpTaoCenter(`item/list?id=${record.nid}`)">
          添加监控
        </a-button>
      </template>
    </base-table>
    <!--    <a-table-->
    <!--      :loading="loading"-->
    <!--      :columns="columns" :data-source="dataSource" size="small" :scroll="{-->
    <!--        y: 600,-->
    <!--        x: 1320,-->
    <!--      }"-->
    <!--      style="min-height: 600px"-->
    <!--      :pagination="false"-->
    <!--    >-->
    <!--      <template #bodyCell="{ column, record }">-->
    <!--            <template v-if="column.key === 'title'">-->
    <!--              <a-row type="flex">-->
    <!--                <a-col>-->
    <!--                  <a-image-->
    <!--                    :src="record.pic_url"-->
    <!--                    :width="20"-->
    <!--                    :height="20"-->
    <!--                  />-->
    <!--                </a-col>-->
    <!--                <a-col flex="1">-->
    <!--                  <a type="link" target="_blank" :href="record.detail_url" style="margin-left: 10px;">-->
    <!--                    {{ record.title }}-->
    <!--                  </a>-->
    <!--                </a-col>-->
    <!--              </a-row>-->
    <!--            </template>-->
    <!--        <template v-if="column.key === 'category'">-->
    <!--          <span style="font-size: 14px">-->
    <!--            {{-->
    <!--              categoryData[record.category] ? categoryData[record.category].path.join('/') : '无官方类目数据'-->
    <!--            }}-->
    <!--          </span>-->
    <!--        </template>-->
    <!--        <template v-if="column.key === 'shopName'">-->
    <!--          <a type="link" target="_blank" :href="record.shopLink">-->
    <!--            {{ record.shopName }}-->
    <!--          </a>-->
    <!--        </template>-->
    <!--        <template v-if="column.key === 'view_price'">-->
    <!--          ¥ {{ record.view_price }}-->
    <!--        </template>-->
    <!--        <template v-if="column.key === 'item_loc'">-->
    <!--          {{ record.item_loc?.replace(/\s/g, '') || '-' }}-->
    <!--        </template>-->
    <!--        <template v-if="column.key === 'dsrDescribePercent'">-->
    <!--          {{ record.dsr_scores[0] }}-->
    <!--        </template>-->
    <!--        <template v-if="column.key === 'dsrServicePercent'">-->
    <!--          {{ record.dsr_scores[1] }}-->
    <!--        </template>-->
    <!--        <template v-if="column.key === 'dsrDeliverPercent'">-->
    <!--          {{ record.dsr_scores[2] }}-->
    <!--        </template>-->
    <!--        <template v-if="column.key === 'action'">-->
    <!--          <a-button type="link" target="_blank" :href="record.detail_url">-->
    <!--            查看商品-->
    <!--          </a-button>-->
    <!--        </template>-->
    <!--      </template>-->
    <!--    </a-table>-->
    <a-divider style="margin: 0 0 10px;"/>
    <div style="color: #444;">
      相似宝贝数量：{{ dataSource.length }}
    </div>
  </a-modal>
</template>

<style scoped>

</style>
